<template>
    <div class="slides">
        <div class="w">
            <ul>
                <li :class="{
                        active: active === 0,
                        subActive1: active - 1 === 0
                    }" 
                    @mouseenter="active = 0" 
                >
                    <img src="../../../assets/imgs/slides1.png" alt="">
                    <div class="mask"></div>
                    <div>
                        <h3 class="text1">助力用户</h3>
                        <h3 class="text2">助力用户学习成长</h3>
                        <p class="text1">学习成长</p>
                        <p class="text2">好书有伴VIP、好书学院、精品课、训练营</p>
                    </div>
                </li>
                <li :class="{
                        active: active === 1,
                        subActive1: active + 1 === 1 || active - 1 === 1,
                        subActive2: active - 2 === 1
                    }" 
                    @mouseenter="active = 1" 
                >
                    <img src="../../../assets/imgs/slides2.png" alt="">
                    <div class="mask"></div>
                    <div>
                        <h3 class="text1">助力内容者</h3>
                        <h3 class="text2">助力优秀内容者打造IP影响力</h3>
                        <p class="text1">打造IP影响力</p>
                        <p class="text2">老师、专业写手</p>
                    </div>
                </li>
                <li :class="{
                        active: active === 2,
                        subActive1: active + 1 === 2 || active - 1 === 2,
                        subActive2: active + 2 === 2
                    }" 
                    @mouseenter="active = 2" 
                >
                    <img src="../../../assets/imgs/slides3.png" alt="">
                    <div class="mask"></div>
                    <div>
                        <h3 class="text1">助力合作方</h3>
                        <h3 class="text2">助力内容合作方链接优质流量</h3>
                        <p class="text1">链接优质流量</p>
                        <p class="text2">爆款课程、优质课程、潜力课程</p>
                    </div>  
                </li>
                <li :class="{
                        active: active === 3,
                        subActive1: active + 1 === 3
                    }" 
                    @mouseenter="active = 3" 
                >
                    <img src="../../../assets/imgs/slides4.png" alt="">
                    <div class="mask"></div>
                    <div>
                        <h3 class="text1">助力媒体端</h3>
                        <h3 class="text2">助力媒体高端高效变现</h3>
                        <p class="text1">高效变现</p>
                        <p class="text2">好书有伴VIP、好书学院、精品课、训练营</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const active = ref(0)

</script>

<style lang="less" scoped>
.slides {
    margin: 100px 0;
    height: 360px;
}

ul {
    height: 360px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;

    li {
        position: relative;
        flex: 0 0 190px;
        height: 300px;
        background-color: #ccc;
        border-radius: 12px;
        overflow: hidden;
        margin-right: 12px;
        transition: all .4s ease-in;

        &:nth-last-of-type(1) {
            margin-right: 0;
        }

        &.active {
            flex: 0 0 392px;
            height: 360px;
            .mask {
                display: none;
            }

            div {
                background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5));
                h3, p {
                    left: 20px;
                }
                .text1 {
                    display: none;
                }
                .text2 {
                    display: block;
                }
            }
        }

        &.subActive1 {
            height: 340px;
        }

        &.subActive2 {
            height: 320px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }

        &:hover {
            div {
                animation: shake .4s;
            }
        }

        @keyframes shake {
            from {
                opacity: 0;
            } 
            to {
                opacity: 1;
            }
        }

        div {
            width: 100%;
            height: 180px;
            background-color: transparent;
            position: absolute;
            left: 0;
            bottom: 0;

            h3 {
                font-size: 24px;
                font-weight: 600;
                color: #fff;
                position: absolute;
                left: 16px;
                top: 98px;
            }

            .text1 {
                display: block;
                white-space: nowrap;
            }
            .text2 {
                display: none;
                white-space: nowrap;
            }

            p {
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                position: absolute;
                left: 16px;
                top: 138px;
                opacity: .6;
            }
        }
    }
}

</style>